<template>
  <view class="res-container">
    <view class="back-btn" @click="goBack">
      <text class="tn-icon-left"></text>
    </view>
		<view style="height: 100px;"></view>
    <view class="res-title" v-if="type!='face'">宠物添加成功</view>
    <view class="res-title" v-if="type=='face'">恭喜您</view>
    <view class="res-title" v-if="type=='face'">录入成功啦！</view>


    <view class="ripple-area" v-if="1==1">
      <view class="ripple ripple1" :class="{animate: true}"></view>
      <view class="ripple ripple2" :class="{animate: true}"></view>
      <view class="ripple ripple3" :class="{animate: true}"></view>
      <view class="ripple-center">
        <text class="iconfont icon-smile"  style="color: #fff;font-size: 30px;"></text>

      </view>
    </view>

    <view class="ripple-area" v-else>
      <view class="rippleku ripple1ku" :class="{animate: true}"></view>
      <view class="rippleku ripple2ku" :class="{animate: true}"></view>
      <view class="rippleku ripple3ku" :class="{animate: true}"></view>
      <view class="ripple-centerku">
        <text class="iconfont icon-kulian" style="color: #fff;font-size: 30px;"></text>

      </view>
    </view>
   <view v-if="1==1">
    <button class="add-btn u-f-ajc" @click="goAdd" v-if="type!='face'">添加设备</button>
    <button class="add-btn u-f-ajc" @click="goAddToIndex" v-if="type=='face'">立即使用</button>
   </view>
   <view v-else>
    <view class="text" style="padding: 0 32rpx;">
      <view class="res-title">可能是以下原因：</view>
      <view class="res-list">
        <view class="res-item">
          <text class="dot">•</text>
          <text class="res-content">确保设备已开启并且处于宠物面容录入模式。一般情况下，您可以通过设备的主界面进入"设置"或"面容录入"功能。</text>
        </view>
        <view class="res-item">
          <text class="dot">•</text>
          <text class="res-content">在录入宠物面容时，请确保周围环境光线充足且均匀，避免过暗或直射光源。自然光或室内白光最为理想。</text>
        </view>
      </view>
    </view>
    <button class="add-btn u-f-ajc" @click="reset" >重新录入</button>
   </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      type: ''
    }
  },
  onLoad(options) {
    this.type = options.type
    // if(type=='face'){
      
    // }
  },  
  methods: {
    goAddToIndex() { 
      uni.redirectTo({
         url: '/pages/index/index'
      });
    },
    reset(){
      uni.redirectTo({
        url: '/pages/register/face/photo'
      })
    },
    goAdd() {
      uni.navigateTo({
        url: '/pages/device/wifi/index?type=' + this.type
      })
    },
    goBack() {
      uni.redirectTo({
         url: '/pages/index/index'
      });
    }
  }
}
</script>

<style scoped>
.res-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.back-btn {
  position: absolute;
  top: 70rpx;
  left: 24rpx;
  z-index: 10;
  font-size: 40rpx;
  color: #222;
  padding: 10rpx;
}
.res-title {
  font-size: 38rpx;
  font-weight: bold;
  color: #111;
  margin-bottom: 20rpx;
  align-self: flex-start;
  margin-left: 32rpx;
}
.ripple-area {
  width: 320rpx;
  height: 320rpx;
  position: relative;
  margin: 100rpx auto 80rpx auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #1ecb8c;
  opacity: 0.18;
  animation: ripple-anim 2s infinite;
}
.rippleku {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #999;
  opacity: 0.18;
  animation: ripple-anim 2s infinite;
}
.ripple1 {
  width: 320rpx;
  height: 320rpx;
  z-index: 1;
  animation-delay: 0s;
}
.ripple2 {
  width: 220rpx;
  height: 220rpx;
  z-index: 2;
  animation-delay: 0.5s;
}
.ripple3 {
  width: 140rpx;
  height: 140rpx;
  z-index: 3;
  opacity: 1;
  background: #1ecb8c;
  animation: none;
}

.ripple1ku {
  width: 320rpx;
  height: 320rpx;
  z-index: 1;
  animation-delay: 0s;
}
.ripple2ku {
  width: 220rpx;
  height: 220rpx;
  z-index: 2;
  animation-delay: 0.5s;
}
.ripple3ku {
  width: 140rpx;
  height: 140rpx;
  z-index: 3;
  opacity: 1;
  background: #999;
  animation: none;
}
.ripple-centerku {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140rpx;
  height: 140rpx;
  background: #999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 2rpx 16rpx rgba(30,203,140,0.12);
}
.ripple-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140rpx;
  height: 140rpx;
  background: #1ecb8c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 2rpx 16rpx rgba(30,203,140,0.12);
}
.tn-icon-smile {
  color: #fff;
  font-size: 60rpx;
}
@keyframes ripple-anim {
  0% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0.05;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}
.add-btn {
  width: 80vw;
  max-width: 500rpx;
  height: 88rpx;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  margin-top: 70rpx;
  letter-spacing: 2rpx;
}
.res-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 32rpx;
}
.res-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.res-item {
  display: flex;
  align-items: flex-start;
  font-size: 30rpx;
  color: #888;
  line-height: 1.7;
}
.dot {
  color: #bbb;
  font-size: 40rpx;
  margin-right: 18rpx;
  line-height: 1.5;
}
.res-content {
  color: #666;
  font-size: 30rpx;
  flex: 1;
}
</style> 